$(function () {
    /*手机端导航*/
    $('.headfixed .toggle_btn').on('click', function () {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on');
            $('.headfixed_show ').removeClass('on');
            $('body,html').css({overflow: ''});
        } else {
            $(this).addClass('on');
            $('.headfixed_show ').addClass('on');
            $('body,html').css({overflow: 'hidden'});
        }
    });
    $('.mobile_nav_box .mobile_ul .mobile_down').on('click', function () {
        if (!$(this).parent().hasClass('cur')) {
            $(this).parent().addClass('cur').parent('li').siblings('li').find('.head_tit').removeClass('cur');
            $(this).parent().next('.head_subnav').slideDown().parent('li').siblings('li').find('.head_subnav').slideUp();
        } else {
            $(this).parent().removeClass('cur');
            $(this).parent().next('.head_subnav').slideUp();
        }
    });
    $('.head_subnav>a').click(function () {
        $('.mobile_nav_box').stop(true, true).slideUp(500);
        $('.toggle_btn_phone').removeClass('cur');
    });
    $('.newinfo1 .newinfo1_rli').eq(0).addClass('active');
    $('.newinfo1 .newinfo1_rli').each(function (index, item) {
        $('.newinfo1 .newinfo1_rli')
            .eq(index)
            .hover(function () {
                $('.newinfo1 .newinfo1_rli').eq(index).addClass('active').siblings().removeClass('active');
            });
    });

    $(window).scroll(function () {
        var h = $(window).height();
        var sc = $(window).scrollTop();
        if (sc > 0) {
            $('.headfixed').addClass('white');
        } else {
            $('.headfixed').removeClass('white');
        }
    });
});

// 返回顶部
function getTop() {
    var top = $(document).scrollTop();
    if ($(document).scrollTop() > 150) {
        $('.right_flex').show();
    } else {
        $('.right_flex').hide();
    }
    setTimeout(getTop);
}

getTop();

function _topStyle() {
    var _top = $(window).scrollTop();
    // var _top2 = $('.headfixed').outerHeight();111
    var num = $('.offtop').length;
    for (var i = 1; i <= num; i++) {
        var _topi =
            $('.offtop')
                .eq(i - 1)
                .offset().top -
            $('.headfixed').height() -
            100;
        if (_top > _topi) {
            $('.offtop')
                .eq(i - 1)
                .addClass('active');
        } else {
            $('.offtop')
                .eq(i - 1)
                .removeClass('active');
        }
    }
}

_topStyle();

$(function () {
    $('.popBtn').click(function () {
        $('.shadow').show();
        $('.popupBox').show();
        $('body,html').css({
            overflow: 'hidden'
        });
    });
    $('.mxk').click(function () {
        $('.shadow').show();
        $('.popupBox').show();
        $('body,html').css({
            overflow: 'hidden'
        });
    });

    $('.close').click(function () {
        $('.shadow').hide();
        $('.popupBox').hide();
        $('body,html').css({
            overflow: ''
        });
    });
});

//tab切换
function tabs1(menu1, cont1, cur1) {
    menu1.click(function () {
        var index1 = menu1.index(this);
        $(this).addClass(cur1).siblings().removeClass(cur1);
        cont1.children().eq(index1).show().siblings().hide();
    });
}

$(function () {
    tabs1($('.art-item'), $('.se-cont5 .left'), 'on');

    $('.card .item').click(function () {
        var index5 = $(this).index();
        $(this).addClass('on').siblings().removeClass('on');
        $('.section2 .sebg').eq(index5).addClass('on').siblings().removeClass('on');
        $('.section2 .over .over-item').eq(index5).addClass('on').siblings().removeClass('on');
    });
});

// faq
$(function () {
    $('.faq-list .item').click(function () {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on');
        } else {
            $(this).addClass('on');
        }
    });
});

// 产品列表
$(function () {
    $('.choose-box .item-tit').click(function () {
        if ($(this).parent().hasClass('on')) {
            $(this).parent().removeClass('on');
        } else {
            $(this).parent().addClass('on');
        }
    });
});
// 产品详情
$(function () {
    // 产品图片切换
    $('.overview .img').click(function () {
        $(this).addClass('on').siblings().removeClass('on');
        var newSrc = $(this).children('img').attr('src');
        $('#change img').attr('src', newSrc);
    });

    // 参数列表切换
    $('.tab-list .item').click(function () {
        var index1 = $(this).index();
        $(this).addClass('on').siblings().removeClass('on');
        $('.show-box .item').eq(index1).addClass('on').siblings().removeClass('on');
    });

    $('.filter ').click(function () {
        $('.choose-box').addClass('on');
        $('.close-menu').addClass('on');
    });
    $('.close-menu ').click(function () {
        $('.choose-box').removeClass('on');
        $('.close-menu ').removeClass('on');
    });
});

$(function () {
    var isDown = false; // 标志，是否被按下
    var startX; // 按下时的x坐标
    var scrollLeft; // 按下时的滚动位置

    $('.scrollbar').mousedown(function (e) {
        isDown = true; // 设置按下标志为true
        $(this).css('cursor', 'grabbing'); // 更改鼠标指针为抓取状态
        startX = e.pageX - $(this).offset().left; // 记录x坐标
        scrollLeft = $(this).scrollLeft(); // 记录滚动位置
    });

    $(document).mouseup(function () {
        isDown = false; // 设置按下标志为false
        $('.scrollbar').css('cursor', 'grab'); // 恢复鼠标指针
    });

    $('.scrollbar').mouseleave(function () {
        isDown = false; // 设置按下标志为false
        $(this).css('cursor', 'grab'); // 恢复鼠标指针
    });

    $('.scrollbar').mousemove(function (e) {
        if (!isDown) return; // 如果没有按下鼠标，则不执行操作
        e.preventDefault(); // 阻止默认事件
        var x = e.pageX - $(this).offset().left; // 计算新的x坐标
        var walk = (x - startX) * 3; // 计算滚动距离，并增加滚动速度
        $(this).scrollLeft(scrollLeft - walk); // 执行滚动
    });

    // 添加对滚轮事件的处理
    $('.scrollbar').on('wheel', function (e) {
        e.preventDefault(); // 阻止默认事件，以防页面滚动

        // 使用 deltaY 的值来滚动
        var scrollAmount = e.originalEvent.deltaY; // 获取滚轮滚动的距离
        $(this).scrollLeft($(this).scrollLeft() + scrollAmount); // 根据滚动量调整滚动位置
    });
});

$(function () {
    $(".popupvideo").click(function () {
        console.log('touch');
        var video = $(this).attr('data-video');
        $('.pop-videobox').addClass('on')
        $('.onplay').attr('src', video)

        if (video.includes(".mp4")) {
            $('.onplay').replaceWith(function(){
                return '<video class="onplay" src="'+video+'" controls></video>'
            });
            $('.pop-videobox').addClass('on');
            // $('.onplay').attr('src', video);
        }else{
            $('.onplay').replaceWith(function(){
                return '<iframe class="onplay" src="'+video+'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
            });
        }
        
    });

    $('.pop-videobox .map').click(function () {
        $('.pop-videobox').removeClass('on');
    });
    $('.pop-videobox .close-video').click(function () {
        $('.pop-videobox').removeClass('on');
    });

    //产品二级导航
    $('.menu-box1').mouseover(function () {
        $(this).addClass('on').siblings().removeClass('on');
        $('.grade1').removeClass('on');
        $(this).find('.grade1').addClass('on');
    });
    $('.menu-box2').mouseover(function () {
        $(this).siblings().children('.rightbox2').removeClass('on');
        $(this).siblings().find('.grade2').removeClass('on');
        $(this).find('.grade2').addClass('on');
        $(this).children('.rightbox2').addClass('on');
    });

    // 搜索
    $('.head-search-btn').click(function () {
        if ($('.head-search-cont').hasClass('on')) {
            $('.head-search-cont').removeClass('on');
        } else {
            $('.head-search-cont').addClass('on');
        }
    });
});

$(function () {
    function handleMouseOver(element, targetClass) {
        const index = $(element).index();
        $(element).addClass('on').siblings().removeClass('on');
        $(targetClass).addClass('on').eq(index).siblings().removeClass('on');
    }

    $('.grade1 .classify').mouseover(function () {
        handleMouseOver(this, '.grade2 .item');
        handleMouseOver(this, '.grade3 .item');
        handleMouseOver(this, '.grade4 .item');
    });

    $('.grade2 .item .g-list .li').mouseover(function () {
        handleMouseOver(this, '.grade3 .item.on .g-list .li');
        handleMouseOver(this, '.grade4 .item.on .g-list .li');
    });

    $('.grade3 .item .g-list .li .g3-li').mouseover(function () {
        handleMouseOver(this, '.grade3 .item.on .g-list .li.on .g3-li');
        handleMouseOver(this, '.grade4 .item.on .g-list .li.on .g3-li');
    });
});

$(function () {
    $('.ab-layout3 .list .li').click(function () {
        var index = $(this).index();
        $(this).addClass('on').siblings().removeClass('on');
        if (index != '0') {
            var src1 = $('.imglist ')
                .children()
                .eq(index - 1)
                .attr('src');
            var src2 = $('.imglist ').children().eq(index).attr('src');
            var src3 = $('.imglist ')
                .children()
                .eq(index + 1)
                .attr('src');
            console.log(src1);
            $('.honer .pos1 img').attr('src', src1);
            $('.honer .pos2 img').attr('src', src2);
            $('.honer .pos3 img').attr('src', src3);
        } else {
            var src2 = $('.imglist ').children().eq(0).attr('src');
            console.log(src1);

            $('.honer .pos2 img').attr('src', src2);
        }
    });
});
$(function () {
    $('.nav-tit1').click(function () {
        if ($(this).parent().hasClass('on')) {
            $(this).parent().removeClass('on');
        } else {
            $(this).parent().addClass('on').siblings().removeClass('on');
        }
    });
    $('.nav-tit2').click(function () {
        if ($(this).parent().hasClass('on')) {
            $(this).parent().removeClass('on');
        } else {
            $(this).parent().addClass('on').siblings().removeClass('on');
        }
    });
    $('.nav-tit3').click(function () {
        if ($(this).parent().hasClass('on')) {
            $(this).parent().removeClass('on');
        } else {
            $(this).parent().addClass('on').siblings().removeClass('on');
        }
    });
});

var swiper8 = new Swiper('.swiper-index1', {
    slidesPerView: 2,
    loop: true,
    spaceBetween: 30,
    pagination: '.swiper-pagination'
});

// 添加一个滚动条线
const contact_downlist = document.querySelectorAll('.hidebox .outbox');
if (contact_downlist.length > 0 && window.innerWidth > 768) {
    // 如果存在contact_downlist并且窗口宽度大于768px
    const contact_down = contact_downlist[contact_downlist.length - 1];
    const down_item = contact_down.querySelectorAll('.his-item');
    let total_width = Array.from(down_item).reduce((accumulator, child) => {
        return accumulator + child.offsetWidth;
    }, 0);
    contact_down.style.clippath = `inset(0 0 0 ${total_width})`;
    contact_down.querySelector('img').style.minWidth = '100.7vw';
}

//点击滚动
const about_honor = document.querySelector('.list-layout .list');
if (about_honor && window.innerWidth > 768) {
    const about_honor_item = about_honor.querySelectorAll('.li');
    const temp_height = about_honor_item[0].offsetHeight + 20;
    let show_item = 700 / temp_height;
    about_honor_item.forEach((item, index, arry) => {
        item.addEventListener('click', () => {
            if (arry.length - index > show_item) {
                about_honor.style.transform = `translateY(-${temp_height * index}px)`;
            } else {
                if (index > arry.length - show_item) {
                    about_honor.style.transform = `translateY(-${temp_height * (arry.length - show_item)}px)`;
                    return;
                }
                about_honor.style.transform = `translateY(-${temp_height * (arry.length - show_item - index)}px)`;
            }
        });
    });
}

// ab-make
new Swiper('.ab-make-swiper', {
    slidesPerView: 1,
    spaceBetween: 10,
    pagination: {
        el: '.ab-make-swiper-pagination'
    },
    paginationClickable: true,
    speed: 300
});

// index
const index_s1_progess = document.querySelector('.index .swiper-progress-bar');
const index_s1_prev = document.querySelector('.index .swiper-btn-prev');
const index_s1_next = document.querySelector('.index .swiper-btn-next');
if (index_s1_progess && index_s1_prev && index_s1_next) {
    index_s1_prev.addEventListener('click', () => {
        index_s1.slidePrev();
    });
    index_s1_next.addEventListener('click', () => {
        index_s1.slideNext();
    });
    const index_s1 = new Swiper('.index .s1-swiper', {
        slidesPerView: 1,
        spaceBetween: 10,
        pagination: '.swiper-num',
        paginationType: 'fraction',
        speed: 3000,
        autoplay: 4000,

        onSlideChangeEnd: function (swiper) {
            index_s1_progess.style.width = `${((swiper.activeIndex + 1) * 100) / swiper.slides.length}%`;
        }
    });
}

new Swiper('.index .s2-swiper', {
    slidesPerView: 4,
    spaceBetween: 20,
    speed: 3000,
    breakpoints: {
        768: {
            slidesPerView: 2,
            autoplay: 5000
        },
        500: {
            slidesPerView: 1,
            autoplay: 5000
        }
    }
});

const index_s3_control = document.querySelectorAll('.index .s3-pagination-item');
if (index_s3_control.length > 0) {
    const index_s3 = new Swiper('.index .s3-swiper', {
        slidesPerView: 1,
        onSlideChangeEnd: function (swiper) {
            index_s3_control.forEach((item, index) => {
                if (index === swiper.activeIndex) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
        }
    });
    index_s3_control.forEach((item, index) => {
        item.addEventListener('click', () => {
            index_s3.slideTo(index);
        });
    });
}

new Swiper('.index .s5-swiper', {
    initialSlide: 1,
    slidesPerView: 1.35,
    spaceBetween: 30,
    loop: true,
    centeredSlides: true,
    speed: 3000,
    prevButton: '.index .s5-swiper .swiper-button-prev',
    nextButton: '.index .s5-swiper .swiper-button-next',
    breakpoints: {
        750: {
            slidesPerView: 1,
            autoplay: 5000
        }
    }
});

new Swiper('.index .s7-swiper', {
    slidesPerView: 3,
    spaceBetween: 30,
    speed: 3000,
    breakpoints: {
        750: {
            slidesPerView: 1,
            autoplay: 5000
        }
    }
});


// index s5 
const index_s5_list = document.querySelectorAll('.index .s5-item');
const index_s5_heig = document.querySelector('.index .s5-container');
if (index_s5_list.length > 0) {
    const temp_height = index_s5_heig.clientHeight;
    index_s5_heig.style.height = `${index_s5_heig.clientHeight}px`;
    index_s5_list.forEach((item, index) => {
        item.classList.remove('active');
    })
    index_s5_list.forEach((item, index) => {
        item.addEventListener('click', () => {
            index_s5_list.forEach((item, index) => {
                item.classList.remove('active');
            })
            item.classList.add('active');
        })
    })
}

if (!document.querySelectorAll(".pic-box .img-list .img").length) {
    const elements = document.querySelectorAll(".pic-box .img-list");
    for (const element of elements) {
        element.style.display = "none";
    }
}

$(function(){
    // kf
    $(".right-close").click(function () {
      $('.right-flex').toggleClass("show");
      if ($('.right-flex').hasClass("show")) {
        $('.right-flex').find("li").fadeIn()
      } else {
        $('.right-flex').find("li").fadeOut()
      }
    });
    $(".right-flex .to-top").click(function () {
      $("html,body").animate({
        "scrollTop": 0
      }, 1000);
    });
    $(".shangqiao").click(function(){
      $(".shadow").show();
      $(".popupBox").show();
    })
    $(".close").click(function(){
        $(".shadow").hide();
        $(".popupBox").hide();
    })
})


// 常用方法
/** 
@function: addActive 给一组dom元素添加active类
@description: 监听点击事件，给一组dom元素添加删除active类,
@param: domlist 一组dom元素，eventname 事件名称默认为click
*/
function addActive(domlist, eventname = 'click', other_domlist = null) {
    if (domlist.length > 0) {
      if (other_domlist) {
        domlist.forEach((item, index) => {
          item.addEventListener(eventname, function () {
            domlist.forEach((item, index) => {
              item.classList.remove('active');
              other_domlist[index].classList.remove('active');
            });
            this.classList.add('active');
            other_domlist[index].classList.add('active');
          });
        });
      } else {
        domlist.forEach((item, index) => {
          item.addEventListener(eventname, function () {
            domlist.forEach((item, index) => {
              item.classList.remove('active');
            });
            this.classList.add('active');
          });
        });
      }
    }
  }

  //轮播绑定方法
/**
 * @作用 使一串dom元素绑定到swiper上
 * @param {*} domlist dom元素列表 type：Array （伪数组）
 * @param {*} swiper  swiper实例 type：Swiper
 */
// function btnSwiper(domlist, swiper, double = false) {
    // if (domlist.lenght < 1) return;
    // if (double) {
    //   swiper.on('slideChange', function () {
    //     domlist.forEach((item, index) => {
    //       item.forEach((item2, index2) => {
    //         item2.classList.remove('active');
    //       });
    //       domlist[index][this.activeIndex].classList.add('active');
    //     });
    //   });
    //   domlist.forEach((item, index) => {
    //     item.forEach((item2, index2) => {
    //       item2.addEventListener('click', function () {
    //         swiper.slideTo(index2);
    //       });
    //     });
    //   });
    // } else {
    //   swiper.on('slideChange', function () {
    //     domlist.forEach((item, index) => {
    //       item.classList.remove('active');
    //     });
    //     domlist[this.activeIndex].classList.add('active');
    //   });
    //   domlist.forEach((item, index) => {
    //     item.addEventListener('click', function () {
    //       swiper.slideTo(index);
    //     });
    //   });
    // }
//   }
if(Swiper){

    var domlist = document.querySelectorAll(".contact-s1-tag");
   
 var contact_swiper= new Swiper('.contact-s1-swiper', {
    slidesPerView: 1,
    effect: 'fade',
    speed: 1000,
    spaceBetween: 30,
    onSlideChangeStart: function(swiper){
        domlist.forEach((item, index) => {
            item.classList.remove('active');
          });
          domlist[swiper.activeIndex].classList.add('active');
      }
})
    domlist.forEach((item, index) => {
        item.addEventListener('click', function () {
            contact_swiper.slideTo(index);
        });
    });
// btnSwiper(document.querySelectorAll(".contact-s1-tag"), contact_swiper);

}
